<template>
  <div class="container">
    <div class="tabber">
      <a-space size="medium" direction="vertical" fill>
        <a-space>
          <a-input placeholder="请输入id搜索" v-model="search"></a-input>
          <a-button type="primary" @click="handleSearch">
            <template #icon>
              <icon-search />
            </template>
            <template #default>搜索</template>
          </a-button>
        </a-space>
        <a-space>
          <a-button type="primary" @click="handleRefresh">
            <template #icon>
              <icon-loop />
            </template>
            <template #default>刷新</template>
          </a-button>

          <a-tag size="large" color="blue"
            >累计收入{{ todayShopping.toFixed(2) }}元
          </a-tag>
          <a-tag size="large" color="gray">累计退款{{ todayRefund.toFixed(2) }}元 </a-tag>
          <a-tag size="large" color="orangered">累计营收{{ todayIncome.toFixed(2) }}元 </a-tag>
        </a-space>
      </a-space>
    </div>
    <a-table
      row-key="id"
      :columns="columns"
      :data="data"
      column-resizable
      :row-selection="rowSelection"
      v-model:selectedKeys="selectedKeys"
      :pagination="pagination"
      :bordered="{ cell: true }"
      :scroll="{ x: 'min-content' }"
      size="small"
      :table-layout-fixed="true"
    >
      <template #avatar="{ record }">
        <a-avatar :imageUrl="BASE_URL + record.user?.avatar"> </a-avatar>
      </template>
      <template #user="{ record }">
        #{{ record.user.id }} {{ record.user.nikeName }}
      </template>
      <template #amount="{ record }">
        {{ record.type == 2 ? "+" : "-" }}
        ¥{{ record.amount ? parseFloat(record.amount).toFixed(2) : "0.00" }}
      </template>
      <template #type="{ record }">
        <template v-if="record.type == 2">
          <a-tag color="blue">收入</a-tag>
        </template>
        <template v-if="record.type == 1">
          <a-tag color="gray">支出</a-tag>
        </template>
      </template>

      <template #applyTime="{ record }">
        {{ formatTime(record.startTime) }} - {{ formatTime(record.endTime) }}
      </template>
      <template #eventTime="{ record }">
        {{ formatTime(record.eventTime) }}
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { BASE_URL } from "../../constant/index";
import { reactive, ref, onMounted, computed } from "vue";
import { formatTime } from "../../utils/dataUtils";

import {
  getRidingListApi,
  getRidingApplyUserListApi,
  putRidingApi,
  postRiddingApi,
  deleteRidingApi,
} from "../../api/riding.js";
import { getStoreWalletApi } from "../../api/store.js";
import {
  IconPlus,
  IconSearch,
  IconLoop,
  IconDelete,
} from "@arco-design/web-vue/es/icon";

import { Message, Modal } from "@arco-design/web-vue";

const rowSelection = reactive({
  type: "checkbox",
  showCheckedAll: false,
  onlyCurrent: false,
});
const pagination = { pageSize: 10 };
const columns = [
  {
    title: "id",
    dataIndex: "id",
    fixed: "left",
    width: 150,
    ellipsis: true,
    tooltip: true,
    align: "center",
  },

  {
    title: "头像",
    slotName: "avatar",
    ellipsis: true,
    tooltip: true,
    width: 80,
    align: "center",
  },
  {
    title: "用户",
    slotName: "user",
    ellipsis: true,
    tooltip: true,
    width: 220,
    align: "center",
  },
  {
    title: "标题",
    dataIndex: "title",
    ellipsis: true,
    tooltip: true,
    width: 100,
    align: "center",
  },

  {
    title: "类型",
    slotName: "type",
    width: 140,
    align: "center",
  },
  {
    title: "金额",
    slotName: "amount",
    ellipsis: true,
    tooltip: true,
    width: 140,
    align: "center",
  },
  {
    title: "详情",
    dataIndex: "description",
    ellipsis: true,
    tooltip: true,
    width: 340,
    align: "center",
  },
  {
    title: "创建时间",
    dataIndex: "createdAt",
    width: 220,
    align: "center",
  },
];

const data = ref([]);
const todayIncome = ref(0);
const todayShopping = ref(0);
const todayRefund = ref(0);
// 获取列表数据
async function getListData() {
  const getRes = await getStoreWalletApi({});
  console.log(getRes);
  console.log(getRes);
  if (getRes.code === 200) {
    data.value = getRes.data.list;
    todayIncome.value = getRes.data.todayIncome;
    todayShopping.value = getRes.data.todayShopping;
    todayRefund.value = getRes.data.todayRefund;
  }
}

// 获取用户数据
onMounted(() => {
  getListData();
});

// 点击刷新按钮
function handleRefresh() {
  data.value = [];
  getListData();
}
const deleteAll = ref(false);
// 已选择的数据
const selectedKeys = ref([]);

const searchType = ref("全部");
const search = ref("");
async function handleSearch() {
  await getListData();
  data.value = data.value.filter((item) => {
    return item.id.includes(search.value);
  });
}
// 上传图片回调
function onUploadSuccess(res) {
  console.log(res.response);
  if (res.response.code === 200) {
    const banner = res.response.data[0];
    form.value.banner = banner;
  }
}

// 显示编辑弹框
const visible = ref(false);
const form = ref({});
const isAdd = ref(false);
// 取消弹框
function handleCancel() {
  isAdd.value = false;
  form.value = {};
}
// 点击编辑按钮
function editorHanddle(item) {
  console.log(item);
  form.value = JSON.parse(JSON.stringify(item));
  //   form.value = item;
  visible.value = true;
}

// 删除弹框
const delvalue = ref(false);
// 点击删除按钮
function deleteHanddle(item) {
  console.log(item);
  form.value = JSON.parse(JSON.stringify(item));
  delvalue.value = true;
}
// 确认删除
async function delBeforeOk() {
  const { id } = form.value;
  console.log(id);
  const delRes = await deleteStoreBannerApi({ id });
  console.log(delRes);
  if (delRes.code === 200) {
    Message.info("删除成功");
    // 更新数据
    getListData();
    delvalue.value = false;
  } else {
    Message.error("删除失败");
    return false;
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 14px;
  box-sizing: border-box;
  .tabber {
    padding-bottom: 14px;
  }
}
</style>
